<!-- 从elementplus的表格中一步步学 扩展至此 -->
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span class="text">文章分类</span>
                <div class="extra">
                    <el-button type="primary" @click="dialogVisible = true">添加</el-button>
                    <!-- <el-button type="primary">修改/删除</el-button> -->
                </div>
            </div>
        </template>
        <el-table :data="tableData" stripe border style="width: 100%; height: 90%;" table-layout="auto">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column type="index" width="50" />
            <el-table-column prop="createTime" sortable label="Date" width="180" />
            <el-table-column label="分类名称" prop="categoryName" />
            <el-table-column label="分类别名" prop="categoryAlias" />
            <el-table-column width="150" label="Operation" v-if="true" align="center" style="display: flex;">
                <template #default="{ row }">
                    <div>
                        <el-tag type="warning">修改</el-tag> &nbsp;
                        <el-tag type="danger" @click="handleRowClick(row)">删除</el-tag>
                    </div>
                </template>

            </el-table-column>
        </el-table>
        <div></div>
    </el-card>
    <!-- 添加分类弹窗 -->
    <el-dialog v-model="dialogVisible" title="添加弹层" width="30%">
        <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px">
            <el-form-item label="分类名称" prop="categoryName">
                <el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="分类别名" prop="categoryAlias">
                <el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { ElMessage } from 'element-plus'
import { ref } from 'vue';
const tableData = ref([
{
        "id": 3,
        "categoryName": "美食家",
        "categoryAlias": "my",
        "createTime": "2023-09-02 12:06:59",
        "updateTime": "2023-09-02 12:06:59"
    },
    {
        "id": 4,
        "categoryName": "娱乐家",
        "categoryAlias": "yl",
        "createTime": "2023-09-02 12:08:16",
        "updateTime": "2023-09-02 12:08:16"
    },
    {
        "id": 5,
        "categoryName": "军事家",
        "categoryAlias": "js",
        "createTime": "2023-09-02 12:08:33",
        "updateTime": "2023-09-02 12:08:33"
    }
])
import { articleCategoryList } from '/src/api/article.js'
import{useTokenStore} from '/src/stores/token.js'
const tokenStore=useTokenStore();
const articleCategoryGet = async () => {
    let data=tokenStore.token
    
    let result = await articleCategoryList(data);
    tableData.value = result.data.data;


}
articleCategoryGet();
const handleRowClick = (row) => {
    console.log(row);
    // 获取日期
      const id = row.id;
    //   // 获取姓名
    const name = row.categoryName;
    //   // 获取地址
    //   const address = row.address;
    // ... 其他字段的获取
    ElMessage.success("行数据:" + name)
    ElMessage.success("行数据:" + id)
};
//控制添加分类弹窗
const dialogVisible = ref(false)

//添加分类数据模型
const categoryModel = ref({
    categoryName: '',
    categoryAlias: ''
})
//添加分类表单校验
const rules = {
    categoryName: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },
    ],
    categoryAlias: [
        { required: true, message: '请输入分类别名', trigger: 'blur' },
    ]
}
//调用接口 传递参数：categoryModel.value即可
</script>

<style>
.page-container {
    min-height: 100%;
    box-sizing: border-box;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* min-height: 100%; */
    box-sizing: border-box;
    width: 100%;
    height: 14%;
    background-color: rgb(255, 255, 255);
    margin-bottom: 1%;

}


</style>
  